<template>
  <div>
    <el-row :gutter="10" style="margin: 10px;">
      <!-- 工程、案卷信息 -->
      <el-col :span="8">
        <el-card style="height: 780px" v-loading="engLoading">
          <div slot="header" class="search-header">
            <div class="show_title">工程目录：</div>
            <div class="flex-container"> <!-- 使用 Flexbox 布局 -->
              <el-input v-model="engQueryParams.engName" placeholder="搜索工程" clearable
                        @keyup.enter.native="searchEng" class="my_input"/>
              <div class="button-group">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="searchEng">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetEng">重置</el-button>
              </div>
            </div>
          </div>
          <ul class="engs-container">
            <li v-for="eng in engList" :key="eng.id">
              <span class="eng-row" @click="toggleEng(eng)" :class="{ selected: eng === selectedEng }">
                <i class="folder-icon eng-folder-icon"></i>
                <span class="folder-name">{{ eng.engName }}</span>
              </span>
              <ul v-show="eng.expanded">
                <li v-for="anJuan in eng.anjuanList" :key="anJuan.id" style="list-style: none;">
                    <span class="anjuan-row" @click="selectanJuan(anJuan)"
                          :class="{ selected: anJuan === selectedAnJuan }">
                      <i class="folder-icon anJuan-folder-icon"></i>
                      <span class="folder-name">{{ anJuan.anJuanName }}</span>
                    </span>
                </li>
              </ul>
            </li>
          </ul>
          <div class="pagination-container">
            <!-- 分页信息 -->
            <el-pagination
              @size-change="handleSizeChangeEng"
              @current-change="handleCurrentChangeEng"
              :current-page.sync="engQueryParams.pageNum"
              :page-size.sync="engQueryParams.pageSize"
              :pager-count="5"
              small
              layout="total, prev, pager, next, jumper"
              :total="engTotal"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
      <!-- 文件信息-->
      <el-col :span="9">
        <file-list ref="fileList" :selectedAnJuan="selectedAnJuan" @selectWenJian="selectFile"
                   @resetFile="resetFile" @clearPictureList="clearPictureList"></file-list>
      </el-col>
      <!-- 图片信息-->
      <el-col :span="7">
        <picture-list ref="pictureList" :selectedWenJian="selectedWenJian" :pictureList="pictureList" :pictureTotal="pictureTotal"></picture-list>
      </el-col>
    </el-row>
    <el-row
      :gutter="10" style="margin-left: 5px; margin-top: 5px; margin-right: 5px">
      <el-card style="margin-left: 10px;margin-right: 10px">
        <el-row>
          <el-col :span="24">
            <eng-info
              :eng-info="selectedEng"
              @updateEngInfo="getEngList"
              :ifDel="ifDelete"
              v-if="showEngInfo"
            ></eng-info>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import {listEng, listTwoThreeFour} from "@/api/system/eng_af";
import {listAnjuan} from "@/api/system/anjuan_af";
import EngInfo from "@/views/system/e-dangan/engInfo.vue";
import fileList from "@/views/system/e-dangan/fileList.vue";
import pictureList from "@/views/system/e-dangan/pictureList.vue";

export default {
  components: {
    EngInfo,
    fileList,
    pictureList,
  },
  data() {
    return {
      canvasList: [],
      pictureList: [],
      pictureTotal: 0,
      engList: [], //工程列表
      anjuanList: [], //案卷列表

      engTotal: 0, //工程总数
      anjuanTotal: 0, //案卷总数
      showEngInfo: true, // 初始化时显示EngInfo组件
      ifDelete: 0,

      selectedEng: null,
      selectedAnJuan: null,
      selectedWenJian: null,
      lastOpenedEngId: null,

      engQueryParams: {
        pageNum: 1,
        pageSize: 20,
        // projectStatus: 2,
        engName: null,
      },
      anjuanQueryParams: {
        eeid: null,
      },
      engLoading: false,
    };
  },
  created() {
    this.getEngList();
  },
  methods: {
    //获取工程信息
    getEngList() {
      this.engLoading = true;
      listTwoThreeFour(this.engQueryParams)
        .then((response) => {
          setTimeout(() => {
            this.engList = response.rows;
            this.engTotal = response.total;
            this.engLoading = false;
          }, 300);
        })
        .catch((error) => {
          this.$message.error("获取工程信息失败:" + error);
          this.engLoading = false;
        });
    },
    searchEng() {
      this.engQueryParams.pageNum = 1;
      this.$refs.fileList.fileList = [];
      this.$refs.fileList.fileList = 0;
      this.$refs.fileList.fileQueryParams.wenJianName = null;
      this.pictureList = [];
      this.pictureTotal = 0;
      this.getEngList();
    },
    resetEng() {
      this.selectedAnJuan = null;
      this.engQueryParams.engName = null;
      this.$refs.fileList.fileList = [];
      this.$refs.fileList.fileList = 0;
      this.$refs.fileList.fileQueryParams.wenJianName = null;
      this.$refs.fileList.fileQueryParams.eaid = null;
      this.$refs.fileList.fileTotal = 0
      this.pictureList = [];
      this.pictureTotal = 0;
      // this.showEngInfo = false; // 隐藏EngInfo组件
      this.ifDelete = 1; // 增加 ifDelete 的值，触发子组件的 ifDel 属性变化
      // this.showEngInfo = false; // 隐藏EngInfo组件
      this.getEngList(); // 重新获取工程信息
    },
    toggleEng(eng) {
      this.ifDelete = 0;
      // 如果上次打开的目录不为空且不等于当前目录的id，则折叠上次打开的目录
      if (this.lastOpenedEngId !== null && this.lastOpenedEngId !== eng.id) {
        const lastOpenedEng = this.engList.find((item) => item.id === this.lastOpenedEngId);
        if (lastOpenedEng) {
          lastOpenedEng.expanded = false;
        }
      }
      // 更新lastOpenedEngId为当前目录的id
      this.lastOpenedEngId = eng.id;
      this.selectedEng = eng
      if (eng.expanded === undefined) {
        this.$set(eng, 'expanded', false);
        this.anjuanQueryParams.eeid = eng.id;
        this.getAnjuanList(eng);
      } else {
        eng.expanded = !eng.expanded;
      }
      // 将 showInfo 设置为 true，重新显示工程信息
      this.showEngInfo = true;
    },
    handleSizeChangeEng(pageSize) {
      this.engQueryParams.pageSize = pageSize;
      this.getEngList();
    },
    handleCurrentChangeEng(currentPage) {
      this.engQueryParams.pageNum = currentPage;
      this.getEngList();
    },
    //获取案卷信息
    getAnjuanList(eng) {
      listAnjuan(this.anjuanQueryParams)
        .then((response) => {
          setTimeout(() => {
            eng.anjuanList = response.rows;
            this.anjuanTotal = response.total;
            eng.expanded = !eng.expanded;
          }, 300);
        })
        .catch((error) => {
          this.$message.error("获取案卷信息失败:" + error);
        });
    },
    selectanJuan(anJuan) {
      this.selectedAnJuan = anJuan;
      this.$refs.fileList.fileQueryParams.wenJianName = null;
      this.pictureList = []
      this.pictureTotal = 0
    },
    selectFile(file) {
      this.selectedWenJian = file;
      this.$refs.pictureList.downloadFlag = false;
    },
    resetFile() {
      this.pictureList = [];
      this.pictureTotal = 0;
    },
    clearPictureList(){
      this.pictureList = [];
      this.pictureTotal = 0;
    }
  },
};
</script>

<style>
/* 公共样式 */
.search-header {
  display: flex;
  justify-content: space-between; /* 将内容分散对齐，使工程信息靠左，其他元素靠右 */
  align-items: center; /* 垂直居中对齐 */
}

.my_input {
  margin-left: auto;
  width: 10vw;
}

.show_title {
  flex-grow: 1; /* 工程目录占据剩余空间，将其靠左 */
}

.flex-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.button-group {
  margin-left: 10px;
  display: flex;
  justify-content: center;
}

.engs-container {
  height: 600px;
  overflow-y: auto;
  padding: 10px;
  margin-top: -15px;
  border-radius: 4px;
}

.eng-row {
  flex-basis: 100%;
  margin-bottom: -2px;
  display: flex;
  align-items: center;
  padding: 6px 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.anjuan-row {
  margin-left: -12px;
  flex-basis: 100%;
  margin-bottom: -2px;
  display: flex;
  align-items: center;
  padding: 6px 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.eng-row:hover {
  background-color: rgba(204, 232, 255, 0.5);
}

.anjuan-row:hover {
  background-color: rgba(204, 232, 255, 0.5);
}

.pagination-container {
  margin-top: 10px;
}

.folder-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  background-size: cover;
}

.folder-name {
  flex-grow: 1;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.show_title {
  font-weight: bold;
  font-size: 20px;
  color: rgb(26, 115, 198);
}

/* 选中状态的样式 */
.selected {
  background-color: #cce8ff;
}

/* 不同图标的样式 */
.eng-folder-icon {
  background-image: url("~@/assets/icons/folder/eng.png");
}

.anJuan-folder-icon {
  background-image: url("~@/assets/icons/folder/anjuan.png");
}

.file-folder-icon {
  background-image: url("~@/assets/icons/folder/file.png");
}

.picture-folder-icon {
  background-image: url("~@/assets/icons/folder/picture.png");
}
</style>
